<template>
    <el-dialog
        :title="title"
        custom-class="el-dialog-600"
        :visible.sync="visible"
    >
        <el-form
            :model="form"
            :rules="rules"
            :ref="formRef"
            label-width="80px"
            :size="$formSize"
        >
            <el-form-item label="菜单分类" prop="pid">
                <el-select
                    v-model="form.pid"
                    filterable
                    clearable
                    placeholder="请选择分类"
                >
                    <el-option
                        class="option-level0"
                        label="顶级分类"
                        :value="0"
                    ></el-option>
                    <el-option
                        v-for="item in tableLevel"
                        :key="item.id"
                        :class="'option-level' + item.level"
                        :label="item.level != 1 ? '└─' + item.name : item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="菜单名称" prop="name">
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.name"
                        auto-complete="off"
                        placeholder="请输入菜单名称"
                    ></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="类型" prop="type">
                <el-select
                    v-model="form.type"
                    clearable
                    placeholder="请选择类型"
                >
                    <el-option
                        v-for="item in typeOption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item
                label="图标"
                prop="icon"
                v-show="form.type == '' || form.type == 1"
            >
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.icon"
                        auto-complete="off"
                    ></el-input>
                </el-col>
            </el-form-item>

            <el-form-item
                label="API"
                prop="api"
                v-show="form.type == '' || form.type == 3 || form.type == 4"
            >
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.api"
                        auto-complete="off"
                    ></el-input>
                </el-col>
            </el-form-item>

            <el-form-item
                label="路径"
                prop="path"
                v-show="form.type == '' || form.type == 2"
            >
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.path"
                        auto-complete="off"
                    ></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="权限" prop="code" v-show="form.type != 1">
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.code"
                        auto-complete="off"
                    ></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="是否显示">
                <el-col :span="23">
                    <el-radio
                        clearable
                        v-model="form.display"
                        v-for="item in displayRadio"
                        :key="item.id"
                        :label="item.id"
                    >
                        {{ item.name }}
                    </el-radio>
                </el-col>
            </el-form-item>

            <el-form-item label="排序" prop="sort">
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model.number="form.sort"
                        auto-complete="off"
                    ></el-input>
                </el-col>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button :size="$btnSize" @click="visible = false">
                取 消
            </el-button>
            <el-button
                type="primary"
                :size="$btnSize"
                :loading="loading"
                @click="onSubmit"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import Options from "@/global/local-data/system";
import { adminMenu as Api } from "api";

export default {
    props: {
        tableList: {
            type: Array,
        },
        tableType: {
            type: String,
        },
        id: {
            type: [Number, String],
        },
    },
    data() {
        return {
            // 状态
            loading: false, // 按钮等待
            visible: false, // 弹窗开关
            title: "", // 标题

            tableLevel: "", // 分类列表

            // 下拉选项
            typeOption: Options.menu.typeOption,
            displayRadio: Options.menu.displayRadio,

            // 表单
            formRef: "formRef", // ref

            form: {
                pid: "",
                name: "",
                type: "",
                icon: "",
                api: "",
                path: "",
                code: "",
                display: 1,
                sort: 0,
            },

            // 验证
            rules: {
                pid: [
                    {
                        required: true,
                        message: "请选择分类",
                        trigger: "change",
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "请输入菜单名称",
                        trigger: "change",
                    },
                    {
                        min: 2,
                        max: 16,
                        message: "字符长度2到16个字符",
                        trigger: "change",
                    }, // validator: newReg1,
                ],
                type: [
                    {
                        required: true,
                        message: "请选择类型",
                        trigger: "change",
                    },
                ],
                icon: [
                    { max: 50, message: "最大长度50个字符", trigger: "change" },
                ],
                api: [
                    { max: 50, message: "最大长度50个字符", trigger: "change" },
                ],
                code: [
                    { max: 50, message: "最大长度50个字符", trigger: "change" },
                ],
                path: [
                    { max: 50, message: "最大长度50个字符", trigger: "change" },
                ],
                sort: [
                    {
                        type: "number",
                        message: "必须为数字",
                        trigger: "change",
                    },
                    {
                        type: "number",
                        max: 9999,
                        message: "排序最高不得超过9999",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        init() {
            this.title = this.tableType == "edit" ? "编辑" : "新增";

            this.tableLevel = this.$utils.getTreeToArray(
                this.tableList,
                null,
                false,
                null
            ); // 按可伸展处理分类

            if (this.tableType == "edit") {
                this.getById();
            } else {
                this.form.pid = this.id;
            }
        },

        async getById() {
            const { code, data } = await this.$axios.get(Api.getById(this.id));

            if (code === 200)
                this.form = {
                    id: data.id,
                    pid: data.pid,
                    name: data.name,
                    type: data.type,
                    code: data.code,
                    icon: data.icon,
                    api: data.api,
                    path: data.path,
                    display: data.display,
                    sort: data.sort,
                };
        },

        async onSubmit() {
            this.$refs[this.formRef].validate((valid) => {
                if (valid) {
                    // 禁止按钮
                    this.loading = true;
                }
            });

            if (this.loading) {
                let api = Api.add;
                let params = {
                    pid: this.form.pid,
                    name: this.form.name,
                    type: this.form.type,
                    code: this.form.code,
                    icon: this.form.icon,
                    api: this.form.api,
                    path: this.form.path,
                    display: this.form.display,
                    sort: this.form.sort,
                };

                if (this.tableType === "edit") {
                    api = Api.update;
                    params.id = this.id;
                }

                const { code, msg, data } = await this.$axios.post(api, params);

                if (code === 200) {
                    this.$msg.success(msg);
                    this.$parent.getList();

                    this.visible = false;
                } else {
                    this.$msg.warning(msg ? msg : data);
                }
                this.loading = false;
            }
        },
    },
    watch: {
        // 监听弹窗开关状态来控制组件的初始化
        visible(status) {
            if (status) {
                this.init();
            } else {
                this.$refs[this.formRef].resetFields();
            }
        },
    },
};
</script>